<template>
  <view class="content">
    <view class="top flexr align-center justify-center">
      <view class="primary-button" @click="showRecommendDialog">
        <image class="recommend-icon" src="@/static/recommend.png"></image>
        我要推荐
      </view>
    </view>
    <view class="recommend-total">
      已推荐给<text class="text-color-primary">{{
        userStore.recommandList.length
      }}</text
      >位朋友
    </view>
    <view class="scroll-view flexc">
      <view
        class="recommend-item flexr align-center align-self-stretch"
        v-for="(item, index) in userStore.recommandList"
        :key="index"
      >
        <image class="icon" :src="BuildImageUrl(item.headPortrait)"></image>
        <view
          class="flex-1 align-self-stretch bottom-divider flexc justify-center"
        >
          <view class="text-color1">{{ item.customerName }}</view>
          <view class="text-color2 phone">{{ item.mobile }}</view>
        </view>
      </view>
      <view
        v-if="userStore.recommandList.length == 0"
        class="flexc flex-1 align-center justify-center"
      >
        <image class="empty-img" src="@/static/empty.png"></image>
        <view class="flexr align-center text-color2"> 暂无推荐~ </view>
      </view>
    </view>

    <uni-popup
      ref="recommendDialogRef"
      @change="onRecommendDialogChanged"
      type="bottom"
      background-color="#fff"
      border-radius="30rpx"
      :mask-click="false"
    >
      <recommendDialog
        :show="recommendDialogShow"
        :recommendImg="recommendImg"
        @onCancel="onCancelRecommendDialog"
        @onConfirm="onConfirmRecommendDialog"
      ></recommendDialog>
    </uni-popup>
  </view>
</template>

<script setup>
import recommendDialog from "@/subpages/widgets/recommendDialog.vue";
import { useUserStore } from "@/store/user";
import { onShareAppMessage, onLoad } from "@dcloudio/uni-app";
import {BuildImageUrl, GssGetQrCodev3} from "@/api/api";
const userStore = useUserStore();
import { ref } from "vue";
import {buildShareSceneMap, SHARE_ACTION_RECOMMEND} from "@/tools/share";
const recommendDialogRef = ref(null);
const recommendDialogShow = ref(false);
const recommendImg = ref("");

onLoad(() => {
  userStore.getRecommendList();
  const pagePath = "pages/appointment/appointment";
  GssGetQrCodev3(
    pagePath,
    JSON.stringify(
      buildShareSceneMap(SHARE_ACTION_RECOMMEND, { Referrer: userStore.userInfo.customerId })
    )
  ).then((data) => {
    recommendImg.value = `data:image/jpeg;base64,${data}`;
  }).finally(() => {
    uni.hideLoading();
  });
});

function showRecommendDialog() {
  recommendDialogRef.value?.open();
}
function onCancelRecommendDialog() {
  recommendDialogRef.value?.close();
}
function onConfirmRecommendDialog() {
  recommendDialogRef.value?.close();
}
function onRecommendDialogChanged({ show }) {
  console.log("onRecommendDialogChanged", show);
  recommendDialogShow.value = show;
}
</script>

<style lang="scss">
.content {
  background-color: #156557;
  padding-bottom: 0;
  .top {
    height: 240rpx;
    min-height: 240rpx;
    .primary-button {
      flex: 1;
      margin: 0 64rpx;
      height: 96rpx;
      min-height: 96rpx;
      border-radius: 48rpx;
      .recommend-icon {
        width: 30rpx;
        height: 30rpx;
        margin-right: 12rpx;
      }
    }
  }
  .recommend-total {
    background-color: white;
    padding-top: 40rpx;
    padding-bottom: 16rpx;
    border-top-right-radius: 36rpx;
    border-top-left-radius: 36rpx;
    padding-left: 32rpx;
    padding-right: 32rpx;
    color: $text-color2;
  }
  .scroll-view {
    flex: 1;
    overflow-y: scroll;
    background-color: white;
    padding-bottom: env(safe-area-inset-bottom);
    .recommend-item {
      height: 136rpx;
      min-height: 136rpx;
      padding: 0 32rpx;
      .icon {
        width: 88rpx;
        height: 88rpx;
        border-radius: 44rpx;
        margin-right: 24rpx;
      }
      .phone {
        font-size: 24rpx;
      }
    }
  }
}
</style>
